/* Tek Kaynak — shared design tokens & base styles */

:root {
  /* Neutral surfaces (light / academic-airy) */
  --bg:          #f6f7f5;  /* warm stone-tinted page */
  --surface:     #ffffff;
  --surface-2:   #f1f4f2;  /* subtle panels */
  --surface-3:   #e9ede9;
  --border:      #e2e6e2;
  --border-strong:#d3d8d3;

  /* Text */
  --text:        #1a2420;
  --text-muted:  #56635c;
  --text-faint:  #8a958e;

  /* Brand */
  --primary:       #047857;  /* emerald-700 */
  --primary-hover: #065f46;  /* emerald-800 */
  --primary-soft:  #ecfdf5;  /* emerald-50 */
  --primary-softer:#d1fae5;  /* emerald-100 */
  --primary-ink:   #065f46;  /* emerald text on soft bg */
  --accent:        #f59e0b;  /* amber-500 */
  --accent-soft:   #fffbeb;  /* amber-50 */
  --accent-ink:    #b45309;  /* amber-700 text */

  --ring: rgba(4,120,87,.35);
  --shadow-soft: 0 1px 2px rgba(16,32,24,.04), 0 6px 18px rgba(16,32,24,.06);
  --shadow-pop:  0 8px 30px rgba(16,32,24,.12);
}

.dark {
  --bg:          #0c110f;
  --surface:     #121815;
  --surface-2:   #19211d;
  --surface-3:   #222b26;
  --border:      #232c27;
  --border-strong:#2e3833;

  --text:        #eef2ef;
  --text-muted:  #9aa6a0;
  --text-faint:  #6b766f;

  --primary:       #10b981;
  --primary-hover: #34d399;
  --primary-soft:  #11271f;
  --primary-softer:#13322729;
  --primary-ink:   #6ee7b7;
  --accent:        #f59e0b;
  --accent-soft:   #2a210e;
  --accent-ink:    #fbbf24;

  --ring: rgba(16,185,129,.4);
  --shadow-soft: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.35);
  --shadow-pop:  0 8px 30px rgba(0,0,0,.5);
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.font-arabic { font-family: 'Noto Naskh Arabic', 'Amiri', serif; }

/* Focus ring for accessibility */
*:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
  border-radius: 6px;
}

::selection { background: var(--primary-softer); color: var(--primary-ink); }

/* Thin, calm scrollbars */
.tk-scroll { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.tk-scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.tk-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 9px; border: 2px solid transparent; background-clip: padding-box; }
.tk-scroll::-webkit-scrollbar-track { background: transparent; }

/* Token-driven utility classes (used across all screens) */
.tk-surface  { background: var(--surface); }
.tk-surface-2{ background: var(--surface-2); }
.tk-border   { border-color: var(--border); }
.tk-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  box-shadow: var(--shadow-soft);
}
.tk-muted  { color: var(--text-muted); }
.tk-faint  { color: var(--text-faint); }

/* Buttons */
.tk-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: .875rem; line-height: 1;
  padding: .6rem .95rem; border-radius: .7rem;
  transition: background .15s ease, color .15s ease, transform .08s ease, border-color .15s ease, box-shadow .15s ease;
  cursor: pointer; white-space: nowrap; border: 1px solid transparent;
}
.tk-btn:active { transform: translateY(1px); }
.tk-btn-primary { background: var(--primary); color: #fff; }
.tk-btn-primary:hover { background: var(--primary-hover); }
.tk-btn-ghost { color: var(--text-muted); }
.tk-btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.tk-btn-outline { border-color: var(--border-strong); color: var(--text); background: var(--surface); }
.tk-btn-outline:hover { background: var(--surface-2); }

/* Chips / tags */
.tk-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 500; line-height: 1;
  padding: .34rem .6rem; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-muted);
  background: var(--surface); transition: all .15s ease; cursor: pointer; white-space: nowrap;
}
.tk-chip:hover { border-color: var(--primary); color: var(--primary-ink); background: var(--primary-soft); }
.tk-chip-emerald { background: var(--primary-soft); color: var(--primary-ink); border-color: transparent; }
.tk-chip-amber   { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.tk-chip-active  { background: var(--primary); color:#fff; border-color: var(--primary); }

/* Badges for content type */
.tk-badge { display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap; font-size:.72rem; font-weight:700; letter-spacing:.02em; padding:.25rem .5rem; border-radius:.45rem; text-transform:uppercase; }
.tk-badge-video { background: #fef2f2; color: #b91c1c; }
.tk-badge-makale{ background: var(--primary-soft); color: var(--primary-ink); }
.dark .tk-badge-video { background:#2a1414; color:#fca5a5; }

/* Inputs */
.tk-input {
  width: 100%; background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: .7rem;
  padding: .6rem .85rem; font-size: .9rem; transition: border-color .15s ease, box-shadow .15s ease;
}
.tk-input::placeholder { color: var(--text-faint); }
.tk-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }

/* Links */
.tk-link { color: var(--primary-ink); font-weight: 500; }
.tk-link:hover { text-decoration: underline; }

/* Header nav active underline */
.tk-nav-link { position: relative; color: var(--text-muted); font-weight: 500; font-size: .9rem; padding: .25rem 0; transition: color .15s ease; }
.tk-nav-link:hover { color: var(--text); }
.tk-nav-link.is-active { color: var(--primary-ink); }
.tk-nav-link.is-active::after { content:''; position:absolute; left:0; right:0; bottom:-.75rem; height:2px; background: var(--primary); border-radius:2px; }

/* Sticky header shell */
.tk-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }

/* Heat scale (Quran coverage) */
.heat-0 { background: var(--surface-2); color: var(--text-faint); }
.heat-1 { background: #d1fae5; color:#065f46; }
.heat-2 { background: #6ee7b7; color:#064e3b; }
.heat-3 { background: #10b981; color:#fff; }
.heat-4 { background: #047857; color:#fff; }
.dark .heat-1 { background:#0c3a2a; color:#6ee7b7; }
.dark .heat-2 { background:#0f5a40; color:#a7f3d0; }
.dark .heat-3 { background:#10b981; color:#04130d; }
.dark .heat-4 { background:#34d399; color:#04130d; }

/* Transcript active segment */
.transcript-seg { transition: background .15s ease, border-color .15s ease; border-left: 3px solid transparent; }
.transcript-seg:hover { background: var(--surface-2); }
.transcript-seg.is-active { background: var(--primary-soft); border-left-color: var(--primary); }

/* Reveal is a no-op by default (content always visible; calm/fast per brief).
   Kept as a class so markup using it stays harmless. */
.tk-reveal { opacity: 1; }

/* Speaker color legend (transcript) */
.spk-1 { --spk: #047857; } .spk-2 { --spk: #b45309; } .spk-3 { --spk: #1d4ed8; } .spk-4 { --spk: #7c3aed; }
.spk-dot { width:.6rem; height:.6rem; border-radius:999px; background: var(--spk); display:inline-block; }
.spk-name { color: var(--spk); font-weight: 700; }